<template>
  <div class="detail-whole" v-if="JSON.stringify(itemData) !== '{}'">
    <div class="back" :style="{'top': fixTop+'px','height': navigatHeight+'px'}">
      <div @click="back()">
        <img src="https://img.wifenxiao.com/h5-wfx/images/materialCenter/backarrow.png" mode="aspectFit">
      </div>
    </div>
    <div class="loop-image" v-if="itemData.images.length > 0">
      <wx-swiper class="my-swipe" @change="dragEnd" :circular="true" >
        <wx-swiper-item v-for="(item,index) in itemData.images" :key="index">
          <img :src="item" @click="bigImage(index)" mode="aspectFill">
        </wx-swiper-item>
      </wx-swiper>
      <div class="custom-indicator"><span>{{index+1}}</span>/<span>{{ itemData.images.length }}</span></div>
    </div>
    <div class="my-swipe" v-else>
      <img src="https://img.wifenxiao.com/h5-wfx/images/materialCenter/materical.png" mode="aspectFill">
    </div>
    <div class="shop-info">
      <div class="goods shop-flex">
        <div class="goods-flex">
          <div class="img_path"><img :src="itemData.shop_info.head_image" class="shop_img"></div>
          <div class="content-item">
            <div class="title shop_title">{{itemData.shop_info.nickname}}</div>
          </div>
        </div>
      </div>
      <div class="goods" v-if="itemData.item_info">
        <div class="goods-flex"  @click.stop="JumpName('item-detail', {detailId:itemData.item_info.item_id})">
          <div class="img_path"><img :src="itemData.item_info.img_path"></div>
          <div class="content-item">
            <div class="title">{{itemData.item_info.item_title}}</div>
            <div class="price">¥{{itemData.item_info.start}}<template v-if="itemData.item_info.end && itemData.item_info.end>itemData.item_info.start"><span>-</span>¥{{itemData.item_info.end}}</template></div>
          </div>
          <div class="img_link"><img src="https://img.wifenxiao.com/h5-wfx/images/icon_right.png"></div>
        </div>
      </div>
    </div>
    <div class="material_goods">
      <div class="block_logo">
        <span class="liner_detail"></span>
        <span class="detail_content">详情</span>
        <span class="liner_detail"></span>
      </div>
      <div class="content" v-if="itemData.content" v-html="itemData.content.replace(/\n/g, '<br>')" @click="saveText(itemData.content)"></div>
      <div class="mater_img" v-if="itemData.images.length > 0">
        <img v-for="(item,index) in itemData.images" :key="index" :src="item" @click="bigImage(index)">
      </div>
      <div class="label-box-content" v-if="itemData.label.length > 0">
        <span v-for="(label, i) in itemData.label" :key="i">{{label}}</span>
      </div>
    </div>
    <div class="fix-operation">
      <wx-button open-type="share" class="share">点击分享</wx-button>
      <div class="share save" @click="saveImage()" v-if="itemData.images.length > 0">一键保存</div>
      <div class="share save" @click="saveText(itemData.content)" v-else>复制文案</div>
    </div>
  </div>
  <div v-else>
    <no-data :noData="noData"></no-data>
  </div>
</template>
<script>
import { getDetail } from '@/api/community/materialCenter'
import small from '@/smallapp/small'
import {mpShare} from '@/utils/utils'
import noData from '@/components/noData/index'
export default {
  components: {
    noData
  },
  data() {
    return {
      noData: {
        width: '184px',
        marginTop: '100px',
        txtMarginTop: '-30px',
        img: 'https://img.wifenxiao.com/h5-wfx/images/no_goods.png',
        text: '暂无内容',
      },
      itemData: {
        content: '',
        images: [],
        label: [],
        shop_info: {
          head_image: '',
          nickname: '',
        }
      },
      index: 0,
      navigatHeight: 0,
      fixTop: 0

    }
  },
  methods: {
    back() {
      const pages = getCurrentPages()
      // console.log('1111', pages, pages[pages.length - 2])
      if (pages[pages.length - 2]) {
        wx.navigateBack({
          delta: 1
        })
      } else {
        this.JumpName('materialCenter')
      }
    },
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    saveImage() {
      small.saveImageQueue(this.itemData.images, this.itemData.content)
    },
    saveText(text) {
      wx.setClipboardData({
        data: text,
        success(res) {
          wx.getClipboardData({
            success(res) {
              wx.showToast({
                title: '文字已复制',
                icon: 'none',
                duration: 2000
              });
            }
          })
        }
      })
    },
    bigImage(index) {
      // TODO 小程序图片预览
      wx.previewImage({
        current: index, //当前图片地址
        urls: this.itemData.images,  //所有要预览的图片的地址集合数组形式
      })
    },
    dragEnd(e) {
      this.index = e.detail.current
    },
    JumpName(name, data) {
      this.$JumpName(this, name, data)
    },
    init() {
      getDetail({ id: this.$route.query.id || this.$route.query.detailId}).then(res => {
        if (res.status == 1) {
          this.itemData = res.data
          console.log(this.itemData, JSON.stringify(this.itemData) === '{}', '============')
          // TODO 小程序分享
          const option = {
            title: this.itemData.jsapi_title,
            imgUrl: this.itemData.images.length > 0 ? this.itemData.images[0] : this.itemData.shop_info.head_image,
            shareParam: this.itemData.jsapi_url.split('?')[1]
          }
          // console.log('分享detail', option)
          mpShare (true, true, '/activity/pages/materialDetail/index', option,'/materialDetail')
        } else {
          this.noData.text = res.msg
          this.itemData = {}
          // this.$Error(res.msg)
        }
      })
    }
  },
  created() {
    this.init()
    const sysinfo = wx.getSystemInfoSync()
    const isiOS = sysinfo.system.indexOf('iOS') > -1;
    if (!isiOS) {
      this.navigatHeight = 48;
    } else {
      this.navigatHeight = 44;
    }
    this.fixTop = sysinfo.statusBarHeight;
  }
}
</script>
<style lang="scss">
@import "~@/styles/mixin";
.detail-whole {
  background: #F7F7F7;
  margin-bottom: 50px;
}
.my-swipe {
  height: 750px;
  img {
    width: 750px;
    height: 750px;
    object-fit: cover;
  }
}
.custom-indicator {
  position: absolute;
  right: 24px;
  bottom: 24px;
  // padding: 4px 10px;
  font-size: 24px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 42px;
  line-height: 42px;
  width: 74px;
  text-align: center;
  span {
    margin: 0 4px
  }
}
.loop-image{
  position: relative;
}
.shop-info {
  background: #fff;
  margin: 16px;
  padding: 16px;
  border-radius: 12px;
  .shop-flex {
    display: flex;
  }
  .goods {
    &.shop-flex {
      background-color: transparent;
      padding: 0;
      margin: 0;
    }
    background-color: #F7F7F7;
    margin-top: 16px;
    padding: 16px;
    border-radius: 4px;
    .goods-flex {
      display: flex;
      align-items: center;
      .img_path {
        img {
          width: 84px;
          height: 84px;
          border-radius: 4px;
          margin-right: 16px;
          &.shop_img {
            width: 70px;
            height: 70px;
            border-radius: 8px;
          }
        }
      }
      .content-item {
        flex: 2;
        .title {
          margin-bottom: 6px;
          margin-right: 16px;
          @include lineClamp(24px, 32px, 1);
          &.shop_title {
            @include lineClamp(32px, 42px, 1);
            font-weight: 600;
            margin: 0;
          }
        }
        .price {
          font-size: 20px;
          span {
            margin: 0 8px;
          }
        }
      }
      .img_link {
        width: 24px;
        height: 24px;
        text-align: center;
        img {
          height: 18px;
        }
      }
    }
  }
}
.material_goods {
  //详情等标题
  .block_logo{
    font-size: 28px;
    text-align: center;
    padding-top: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    .detail_content{
      padding:0 16px;
    }
    .liner_detail{
      height: 2px;
      width: 64px;
      background: #E6E6E6;
      position: relative;
      &::after{
        content: '';
        position: absolute;
        background:#E6E6E6 ;
        width: 8px;
        height: 8px;
        top: 0;
        transform: rotate(-45deg) translateY(-50%);
      }
      &:first-child{
        &::after{
          right: -3px;
        }
      }
      &:last-child{
        &::after{
          left: 3px;
        }
      }
    }
  }
  .content {
    font-size: 28px;
    line-height: 40px;
    padding: 16px;
    padding-bottom: 0;
  }
  .mater_img {
    margin-top: 16px;
    img {
      width: 100%;
    }
  }
  .label-box-content {
    padding: 30px 16px;
    display: flex;
    flex-wrap: wrap;
    span {
      display: inline-block;
      width: auto;
      padding: 0 20px;
      line-height: 45px;
      border-radius: 50px;
      margin-right: 10px;
      margin-bottom: 10px;
      border: 2px solid #C9CDD4;
    }
  }
}
.fix-operation {
  position:fixed;
  background-color: #fff;
  padding: 24px;
  display: flex;
  justify-content: space-around;
  align-items:center;
  bottom: 0;
  right: 0;
  left: 0;
  .share {
    // width: 238px;
    flex: 1;
    padding: 16px 0;
    border-radius: 50px;
    text-align: center;
    font-size: 38px;
    border: 2px solid #FF2A40;
    color: #FF2A40;
    &.save {
      background:#FF2A40;
      color: #fff;
      margin-left: 26px;
    }
  }
}
.back {
  position: fixed;
  padding-left: 32px;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  z-index: 10;
  div {
    border-radius: 50px;
    width: 50px;
    height: 50px;
    padding: 12px 0;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
